<el-dialog
            v-if="form_fields.length>0"
            :title="form.id ? '编辑' : '新增'"
            :visible.sync="dialogVisible"
            width="600px"
            top="5vh"
            :close-on-click-modal="false"
            append-to-body
    >
        <el-form :model="form" label-width="100px">
            <template v-for="(field, index) in form_fields">
                <el-form-item :label="field.label" v-if="field.componentType=='input'" :required="field.isRequired==1?true:false">
                    <el-input :disabled="!field.isEditable && form.id>0" v-model="form[field.field]" autocomplete="off" placeholder="请输入"  />
                </el-form-item>
                <el-form-item :label="field.label" v-if="field.componentType=='textarea'" :required="field.isRequired==1?true:false">
                    <el-input :disabled="!field.isEditable && form.id>0" type="textarea" v-model="form[field.field]" autocomplete="off" placeholder="请输入"  />
                </el-form-item>
                <el-form-item :label="field.label" v-if="field.componentType=='select'" :required="field.isRequired==1?true:false">
                    <el-select :disabled="!field.isEditable && form.id>0" v-model="form[field.field]" placeholder="请选择" >
                        <el-option v-for="item in field.options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="field.label" v-if="field.componentType=='radio'" :required="field.isRequired==1?true:false">
                    <el-radio-group :disabled="!field.isEditable && form.id>0" v-model="form[field.field]">
                        <el-radio  v-for="item in field.options" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="field.label" v-if="field.componentType=='checkbox'" :required="field.isRequired==1?true:false">
                    <el-checkbox-group :disabled="!field.isEditable && form.id>0" v-model="form[field.field]">
                        <el-checkbox v-for="item in field.options" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item :label="field.label" v-if="field.componentType=='date'" :required="field.isRequired==1?true:false">
                    <el-date-picker
                            :disabled="!field.isEditable && form.id>0"
                            v-model="form[field.field]"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd"
                            style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="field.label" v-if="field.componentType=='time'" :required="field.isRequired==1?true:false">
                    <el-time-picker
                            :disabled="!field.isEditable && form.id>0"
                            v-model="form[field.field]"
                            placeholder="选择时间"
                            value-format="HH:mm:ss"
                            style="width: 100%;">
                    </el-time-picker>
                </el-form-item>
                <el-form-item :label="field.label" v-if="field.componentType=='datetime'" :required="field.isRequired==1?true:false">
                    <el-date-picker
                            :disabled="!field.isEditable && form.id>0"
                            v-model="form[field.field]"
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item :label="field.label" v-if="field.componentType=='daterange'" :required="field.isRequired==1?true:false">
                    <el-date-picker
                            :disabled="!field.isEditable && form.id>0"
                            v-model="form[field.field]"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="field.label" v-if="field.componentType=='switch'" :required="field.isRequired==1?true:false">
                    <el-switch v-model="form[field.field]"></el-switch>
                </el-form-item>
                <el-form-item :label="field.label" v-if="field.componentType=='number'" :required="field.isRequired==1?true:false">
                    <el-input-number v-model="form[field.field]"  ></el-input-number>
                </el-form-item>
                <el-form-item :label="field.label" v-if="field.componentType=='number_input'" :required="field.isRequired==1?true:false">
                    <el-input type="number"  v-model="form[field.field]"  ></el-input>
                </el-form-item>

                <!-- 单图 -->
                <el-form-item :label="field.label" v-if="field.componentType=='upload-image'" :required="field.isRequired==1">
                  <el-upload
                    :disabled="!field.isEditable && form.id>0"
                    class="upload-demo"
                    :limit="1"
                    :headers="uploadHeaders"
                    :data="uploadData"
                    :name="uploadName"
                    :action="uploadApi"
                    :show-file-list="true"
                    list-type="picture"
                    :file-list="uploadLists[field.field] || []"
                    :before-upload="(file) => handleBeforeUpload(file, field)"
                    :on-success="(res, file, fileList) => handleUploadSuccess(field.field, res, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove(field.field, file, fileList)"
                    :on-change="(file, fileList) => handleUploadChange(field.field, file, fileList)"
                    :on-error="(err) => handleUploadError(field.field, err)"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传 jpg/png，且不超过 500kb</div>
                  </el-upload>
                </el-form-item>

                <!-- 多图 -->
                <el-form-item :label="field.label" v-if="field.componentType=='upload-images'" :required="field.isRequired==1">
                  <el-upload
                    ref="uploader"
                    :disabled="!field.isEditable && form.id>0"
                    class="upload-demo"
                    multiple
                    :limit="uploadLimit"
                    :headers="uploadHeaders"
                    :data="uploadData"
                    :name="uploadName"
                    list-type="picture-card"
                    :action="uploadApi"
                    :file-list="uploadLists[field.field] || []"
                    :before-upload="(file) => handleBeforeUpload(file, field)"
                    :on-success="(res, file, fileList) => handleUploadSuccess(field.field, res, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove(field.field, file, fileList)"
                    :on-change="(file, fileList) => handleUploadChange(field.field, file, fileList)"
                    :on-error="(err) => handleUploadError(field.field, err)"
                    :on-exceed="() => handleExceed(field)"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>

                <!-- 单文件 -->
                <el-form-item :label="field.label" v-if="field.componentType=='upload-file'" :required="field.isRequired==1">
                  <el-upload
                    :disabled="!field.isEditable && form.id>0"
                    class="upload-demo"
                    :limit="1"
                    list-type="text"
                    :action="uploadApi"
                    :file-list="uploadLists[field.field] || []"
                    :on-success="(res, file, fileList) => handleUploadSuccess(field.field, res, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove(field.field, file, fileList)"
                    :on-change="(file, fileList) => handleUploadChange(field.field, file, fileList)"
                    :on-error="(err) => handleUploadError(field.field, err)"
                    :on-exceed="() => handleExceed(field)"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>

                <!-- 多文件 -->
                <el-form-item :label="field.label" v-if="field.componentType=='upload-files'" :required="field.isRequired==1">
                  <el-upload
                    :disabled="!field.isEditable && form.id>0"
                    class="upload-demo"
                    multiple
                    :limit="uploadLimit"
                    list-type="text"
                    :action="uploadApi"
                    :file-list="uploadLists[field.field] || []"
                    :on-success="(res, file, fileList) => handleUploadSuccess(field.field, res, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove(field.field, file, fileList)"
                    :on-change="(file, fileList) => handleUploadChange(field.field, file, fileList)"
                    :on-error="(err) => handleUploadError(field.field, err)"
                    :on-exceed="() => handleExceed(field)"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>




            </template>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveData">保存</el-button>
        </div>
    </el-dialog>
